<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}

		.pingjia-list{width: 100%;}
		.pingjia-list .pingjia-one{width: 100%;padding: 0 15px 25px 15px;box-sizing: border-box;background: #FFFFFF;margin-bottom: 10px;}
		.pingjia-list .pingjia-one .top-box{padding: 20px 0 ;box-sizing: border-box;align-items: center;}
		.pingjia-list .pingjia-one .top-box .img-box{width: 46px;height: 46px;flex-shrink: 0;align-items: center;justify-content: center;overflow: hidden;}
		.pingjia-list .pingjia-one .top-box .img-box img{display:block;width: 100%;}
		.pingjia-list .pingjia-one .top-box .xin-box{align-items:center;padding-left:16px;box-sizing: border-box;}
		.pingjia-list .pingjia-one .top-box .xin-box span{display:block;width: 14px;height: 14px;float: left;margin-right: 4px;background: url(../../image/main0/px_0.png) no-repeat center;background-size:cover;}
		.pingjia-list .pingjia-one .top-box .xin-box .on{background: url(../../image/main0/px_1.png) no-repeat center;background-size:cover;}

		.pingjia-list .pingjia-one .top-box .text{font-size: 14px;color: #333333;}
		.pingjia-list .pingjia-one .text-box{width: 100%;background:#F8F8F8;padding: 15px 15px 0 15px;box-sizing: border-box;}
		.pingjia-list .pingjia-one .text-box textarea{width: 100%;height: 80px;font-size: 14px;line-height: 20px;}
		.pingjia-list .pingjia-one .text-box .num{text-align: right;line-height:20px;font-size: 12px;color: #999999;padding-bottom: 10px;}
		.pingjia-list .pingjia-one .niming{height: 60px;align-items:center;}
		.pingjia-list .pingjia-one .niming .text{font-size: 14px;color: #666666;}
		.pingjia-list .pingjia-one .up-img{width: 100%;background: #FFFFFF;margin-bottom: 10px;box-sizing: border-box;}
		.pingjia-list .pingjia-one .up-img .title{line-height: 50px;font-size: 14px;}
		.pingjia-list .pingjia-one .up-img .img-box{width: 100%;flex-wrap: wrap;}
		.pingjia-list .pingjia-one .up-img .img-box .img-one{width: 22%;padding-bottom: 22%;background-color:#F5F6F6;margin-right: 4%;position: relative;top: 0;left: 0;}
		.pingjia-list .pingjia-one .up-img .img-box .img-one:nth-child(4n){margin-right: 0;}
		.pingjia-list .pingjia-one .up-img .img-box .img-one .del{width: 20px;height: 20px;position: absolute;top: 4px;right: 4px;background: url(../../image/main3/del-img.png) no-repeat center;background-size:cover ;}
		.pingjia-list .pingjia-one .up-img .img-box .add-img{background: url(../../image/main3/add_img.png) no-repeat center ;background-size:100%;width: 22%;padding-bottom: 22%;}

		.shouhuo-btn{height: 45px;background:#FF9502;height: 45px;border-radius:4px;
		text-align: center;line-height: 45px;font-size: 18px;color: #FFFFFF;margin: 60px 30px 30px 30px;}

		.aui-switch {width: 3.3rem;height: 1.6rem;position: relative;vertical-align: top;border: 1px solid #E8E8E8;background-color: #E8E8E8;border-radius: 1.2rem;background-clip: content-box;display: inline-block;outline: none;
		-webkit-appearance: none;appearance: none;-webkit-user-select: none;user-select: none;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-background-clip: padding-box;background-clip: padding-box;-webkit-transition: all 0.2s linear;transition: all 0.2s linear;}
		.aui-switch:before {width: 1.45rem;height: 1.45rem;position: absolute;top: 0;left: 0;border-radius: 1.2rem;background-color: #fff;content: '';-webkit-transition: left 0.2s;transition: left 0.2s;}
		.aui-switch:checked {border-color: #FF9502 ;background-color: #FF9502;}
		.aui-switch:checked:before {left: 1.7rem;}

	</style>
	<body>
		<div id="vue" class="warp">

			<div class="pingjia-list">
				<div class="pingjia-one" v-for="(item,key) in data" :data-sid="item.sid" :data-orderid="item.orderid" :data-ggstr="item.ggstr">
					<div class="top-box flex">
						<div class="img-box flex"><img :src="item.image"></div>
						<div class="xin-box flex flex1">
							<span class="on" onclick="selectXing(this)" data-index="0"></span>
							<span class="on" onclick="selectXing(this)" data-index="1"></span>
							<span class="on" onclick="selectXing(this)" data-index="2"></span>
							<span class="on" onclick="selectXing(this)" data-index="3"></span>
							<span class="on" onclick="selectXing(this)" data-index="4"></span>
						</div>
						<div class="text" id="wenzi">非常好</div>
					</div>
					<div class="text-box">
						<textarea maxlength="500" class="content" oninput="inputMiaoShu(this)" placeholder="宝贝是否满足您的期待？说说您的使用心得分享给其他想购买的朋友吧"></textarea>
						<div class="num">0/500</div>
					</div>
					<div class="niming flex">
						<div class="text flex1">匿名评价</div>
						<input type="checkbox" class="aui-switch" name="default" >
					</div>
					<div class="up-img">
		        		<div class="title">上传图片<i style="color:#999999;">(最多4张)</i></div>
		        		<div class="img-box flex">
		        			<div class="add-img" :data-id="'addImg' + key" :id="'addImg' + key" tapmode onclick="fnUploadPic(this)"></div>
		        		</div>
		        	</div>
				</div>
			</div>

			<div style="width:100%;height:80px;"></div>
			<div class="warp-btn" id="app-footer" style="display:none;" :style="{ display:(Pdata ? '':'none')}" tapmode onclick="upDataPinJia()">
	            <div class="btn">提交</div>
	        </div>

		</div>
	</body>
</html>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">
	define(function (require, exports, module) {
		lanYun.setFooter('app-footer');
		pageParam = api.pageParam;
		var oosinfo = lanYun.getStorage('imageData') || null;
		var ajax = 0;
		var sdata = [];
		//console.log(JSON.stringify(oss));

		_page.getData = function(loading) {
			lanYun.getVueData({url:'UserOrder/pinjia',get:{orderid:pageParam.id},cache:0,loading:loading},function(ret) {
				lanYun.vue.data = ret.listData;
				//console.log(JSON.stringify(ret))
			});
		};

		lanYun.newVue('#vue',{
			data:[],
		}, function() {
			_page.getData(1);
		});

		// 评星
		selectXing = function (tis){
			var dst = tis.dataset;
			var text = ["非常差","差","一般","好","非常好"];
			$(tis).parents('.xin-box').find('span').removeClass('on');
			$(tis).parents('.top-box').find('.text').html(text[dst.index]);
			var spans = $(tis).parents('.xin-box').find('span');
			$(spans).each(function (i,j) {
				if(i <= dst.index){
					$(j).addClass('on');
				}
			});
			return;
		}

		// 上传图片
		fnUploadPic = function(tis) {
	        lanYun.getPermission(['camera','photos']);
			var dst = tis.dataset;
			if(ajax == 1){return;}
			ajax = 1;
			api.actionSheet({buttons: ['拍照', '相册选取'],style: {fontNormalColor: '#333',fontPressColor: '#333'}}, function(ret, err) {
				ajax = 0;
				if (ret.buttonIndex == 3)return false;
				var souType = 'album'; //相机
				if (ret.buttonIndex == 1)souType = 'camera';
				api.getPicture({sourceType: souType,mediaValue: 'pic',destinationType: 'url',quality: 80,allowEdit: true,}, function(ret, err) {
					if (ret && ret.data) {
						fnUploadOos(ret.data,dst.id);
					}
				});
			});
		};

		//上传到对象存储服务器
		function fnUploadOos(path,idBox){
			if(!path){
				lanYun.toast('请选择上传文件!');
				return;
			}
			if(!oosinfo){
				lanYun.toast('网路访问超时请重试');
				return;
			}
			upfile(path,idBox);
		};

		// 上传图片
		function upfile(path,idBox){
			var ext = lanYun.getFileExt(path);
			var file = oosinfo.key+lanYun.randStr(10)+ext;
			var urlFile = oosinfo.url+'/'+file;
			lanYun.showProgress({type:2});
			api.ajax({url: oosinfo.url,method: 'post',data: {values:{key: file,OSSAccessKeyId: oosinfo.OSSAccessKeyId,success_action_status: oosinfo.success_action_status,policy:oosinfo.policy,signature: oosinfo.signature},files: {file:path}}}, function(ret, err) {
				lanYun.hideProgress();
				if(err && err.statusCode == 200){
					$('#'+idBox).before('<div class="img-one bgpic '+ idBox +'" data-img="'+ urlFile +'" style="background-image:url('+ path +');"><div class="del" tapmode data-id="'+ idBox +'" onclick="delImages(this)"></div></div>');
					if($('.'+idBox).length >= 4){
						$('#'+idBox).hide();
					}
					lanYun.toast('上传成功');
				}else{
					lanYun.toast('上传失败!');
				}
			});
		};

		// 删除图片
		delImages = function(tis){
			var dst = tis.dataset;
			$(tis).parent().remove();
			if($('.'+ dst.id).length <= 3){
				$('#'+ dst.id).show();
			}
		};

		// 输入评价内容
		inputMiaoShu = function (tis){
			var length = $(tis).val().length;
			$(tis).next('.num').html(length + '/500');
		}

		//获取数据
		write_data = function (){
			$('.pingjia-one').each(function (k,v){
				var data = {};
				var dst = v.dataset;
				var num = $(v).find('.xin-box .on').length;
				var con = $(v).find('.content').val();
				var niming = $(v).find("input[type='checkbox']").is(':checked') ? 1 : 0 ;
				var images = [];
				$(v).find('.up-img .img-box .img-one').each(function(a,f) {
					images.push($(this).data('img'));
				});
				data.sid = dst.sid;
				data.orderid = dst.orderid;
				data.ggstr = dst.ggstr;
				data.lv = num;
				data.content = con;
				data.nmsta = niming;
				data.images = images;
				sdata.push(data);
			});
		}

		//提交数据
		upDataPinJia = function (){
			write_data();
			//console.log(JSON.stringify(sdata));
			lanYun.post('UserOrder/pinjiaadd',{data:sdata},function (ret) {
				lanYun.toast(ret.msg);
				if(ret.errcode == 0 ){
					lanYun.setStorage('reshpage',1);
					lanYun.event('uporderNum');
					lanYun.openFrame('main3/msg_pinjia.html',{type:"pingjia",ani:1},function(){});
				}
			},2)
		}

	});
</script>
